<template>
<!--  <div id="app" style="font-size:26px;font-weght:bold;margin:30px 0">-->
<!--    <div class="all" v-if="allFlag">-->
<!--      <header class="header">-->
<!--        <div v-for="(item,index) in topInputList" :key="index" class="everyBox">-->
<!--          <span class="span">{{item.title}}：</span>-->
<!--          <el-input  placeholder=""  v-model="item.text" :placeholder="item.title" class="top-input"></el-input>-->
<!--        </div>-->
<!--        <div class="everyBox slelctBox">-->
<!--          <span class="span">商品状态：</span>-->
<!--          <el-select  v-model="value1" placeholder="全部" @change="opctionchangeOne">-->
<!--            <el-option-->
<!--              v-for="item in options1"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </div>-->
<!--        <div class="caozuo">-->
<!--          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>-->
<!--          <el-button type="primary" icon="el-icon-plus" @click="addGood">添加商品</el-button>-->
<!--          <div class="everyBox slelctBox">-->
<!--            <span class="span">批量操作：</span>-->
<!--            <el-select  v-model="value2" placeholder="全部" @change="opctionchangeOne2">-->
<!--              <el-option-->
<!--                v-for="item in options2"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--        </div>-->
<!--      </header>-->
<!--      <div class="body">-->
<!--        <el-tabs type="border-card" @tab-click="handleClick">-->
<!--          <el-tab-pane>-->
<!--            <span label="全部商品" slot="label">全部商品<i class="el-icon-date"></i> </span>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane>-->
<!--            <span label="上架商品" slot="label">上架商品<i class="el-icon-date"></i> </span>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane>-->
<!--            <span label="下架商品" slot="label">下架商品<i class="el-icon-date"></i> </span>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane>-->
<!--            <span label="库存报警" slot="label">库存报警<i class="el-icon-date"></i> </span>-->
<!--          </el-tab-pane>-->
<!--          <el-table-->
<!--            v-loading="loading"-->
<!--            :data="tableData"-->
<!--            max-height="600"-->
<!--            border-->
<!--            fit-->
<!--            @selection-change="handleSelectionChange"-->
<!--          >-->
<!--            <el-table-column type="selection" width="55" fixed></el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="id"-->
<!--              label="ID"-->
<!--              width="50">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              label="操作"-->
<!--              width="">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  @click="detailGoods(scope.$index, scope.row)">删除</el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="nickname"-->
<!--              label="上下架"-->
<!--              width="">-->
<!--              <template slot-scope="scope">-->
<!--                <el-switch-->
<!--                  v-model="scope.row.marketable"-->
<!--                  active-color="#13ce66"-->
<!--                  inactive-color="#ff4949"-->
<!--                  active-text="上架"-->
<!--                  inactive-text="下架"-->
<!--                  :active-value='1'-->
<!--                  :inactive-value='2'-->
<!--                  @change="switchChange(scope.row)">-->
<!--                </el-switch>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="mobile"-->
<!--              label="缩略图"-->
<!--              width="100">-->
<!--              <template slot-scope="scope">-->
<!--                <el-image-->
<!--                  style="width: 50px; height: 50px"-->
<!--                  :src="scope.row.aimages[0]"-->
<!--                  :preview-src-list="scope.row.aimages"-->
<!--                  fit="cover"-->
<!--                ></el-image>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="name"-->
<!--              label="名称"-->
<!--              width="">-->
<!--            </el-table-column>-->
<!--            <el-table-column show-overflow-tooltip-->
<!--                             prop="bn"-->
<!--                             label="商品编码"-->
<!--                             width="">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="brand_name"-->
<!--              label="品牌"-->
<!--              width="">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              label="库存"-->
<!--              width="">-->
<!--              <template  slot-scope="scope">-->
<!--                <span :style="scope.row.stock<=30?'color:red':''">{{scope.row.stock}}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--              show-overflow-tooltip-->
<!--              prop="price"-->
<!--              label="销售价"-->
<!--              width="">-->
<!--            </el-table-column>-->

<!--          </el-table>-->

<!--        </el-tabs>-->
<!--        <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="currentPage"-->
<!--          :page-sizes="[10, 20, 30, 40, 50, 60,]"-->
<!--          :page-size="100"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total">-->
<!--        </el-pagination>-->
<!--      </div>-->




<!--    </div>-->
<!--&lt;!&ndash;    <div class="bianjiGoods" v-if="!allFlag&&bianjiFlag">&ndash;&gt;-->
<!--&lt;!&ndash;      <bianjiMaterials :sonObj="sonObj" @back="back"></bianjiMaterials>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--&lt;!&ndash;    <div v-if="!allFlag&&addFlag">&ndash;&gt;-->
<!--&lt;!&ndash;      <addMaterials @back="back"></addMaterials>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--  </div>-->

</template>

<script>
import {deleteGoods, goodsListmo, up_down} from "../../../../utils/api";

export default {
  name: "principalList",
  data() {
    //这里存放数据
    return {
      adad:[1,2,3],
      allFlag:true,
      bianjiFlag:false,
      addFlag:false,
      loading: true,
      token:sessionStorage.getItem("token"),
      topInputList:[
        {title:'商品名称',text:''},
        {title:'商品编号',text:''},
      ],
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      total:0,
      limit:10,
      value1:'',
      value2:'',
      options1: [
        {
          value: '111',
          label: '全部'
        }, {
          value: '1',
          label: '上架'
        }, {
          value: '2',
          label: '下架'
        }],
      options2: [
        {
          value: '111',
          label: '请选择'
        }, {
          value: '1',
          label: '批量上架'
        }, {
          value: '2',
          label: '批量下架'
        }, {
          value: '3',
          label: '删除'
        }],
      type:'',
      sonObj:{},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    value1(n,o){
      if(n==111){
        this.value1 = ''
      }
      this.type = this.value1
    },
    value2(n,o){
      if(n==111){
        this.value2 = ''
      }
    },
  },
  //方法集合
  methods: {
    // 删除单个商品
    detailGoods(index,row){
      this.deleteGoods(this.token,row.id)
    },
    // 删除商品接口
    deleteGoods(token,ids){
      this.$confirm('确认删除选中商品吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGoods(token,ids).then(res=>{
          if(res.data.status){
            this.$message({
              type: 'success',
              message: '删除成功!',
              onClose:(res)=>{
                this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
              }
            });
          }else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 编辑商品
    handleEdit(index,row){
      this.sonObj = JSON.parse(JSON.stringify(row))
      this.allFlag = false
      this.bianjiFlag = true
    },
    // 返回商品管理
    back(){
      this.allFlag = true
      this.bianjiFlag = false
      this.addFlag = false
      this.sonObj={}
      this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
    },
    // 添加商品
    addGood(){
      this.allFlag = false
      this.addFlag = true
    },
    // 选择商品tab
    handleClick(tab, event){
      if(tab.index==0){
        this.type = ''
      }else{
        this.type = tab.index
      }
      this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
    },
    // 单个上下架
    switchChange(row){
      let type = ''
      if(row.marketable==1){
        type = 'up'
      }else if(row.marketable==2){
        type = 'down'
      }
      let list = row.id
      console.log(JSON.stringify(list),list)
      this.up_down(this.token,list,type)
    },
    // 商品状态
    opctionchangeOne(e){

    },
    // 批量操作
    opctionchangeOne2(){
      if(this.multipleSelection.length<=0){
        this.$message('请先选择要操作的数据');
        return
      }
      if(this.value2==111){
        //'请选择'
      }
      if(this.value2==1){
        //'上架'
        let ids = ''
        this.multipleSelection.forEach((item,index)=>{
          ids+=(item.id+',')
        })
        ids = ids.substr(0, ids.length - 1)
        this.up_down(this.token,ids,'up')
        this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
      }
      if(this.value2==2){
        //'下架'
        let ids = ''
        this.multipleSelection.forEach((item,index)=>{
          ids+=(item.id+',')
        })
        ids = ids.substr(0, ids.length - 1)
        this.up_down(this.token,ids,'down')
        this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
      }
      if(this.value2==3){
        //'删除'
        let ids = ''
        this.multipleSelection.forEach((item,index)=>{
          ids+=(item.id+',')
        })
        ids = ids.substr(0, ids.length - 1)
        this.deleteGoods(this.token,ids)

      }
      this.value2 = ''

    },
    // 上下架接口
    up_down(token,ids,type){
      up_down(token,ids,type).then(res=>{
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else{
          this.$message.error('操作失败');
        }
      })
    },
    // 选中的用户
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页多少条
    handleSizeChange(val) {
      this.limit = val
      this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)

    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
    },
    // 获取用户信息接口
    getShopList(token,page,limit,name,bn,status){
      this.loading = true
      goodsListmo(token,page,limit,name,bn,status).then(res=>{
        if(res.data.status){
          this.tableData = res.data.data.data
          this.total = res.data.data.count
          this.tableData.forEach(item=>{
            // console.log(JSON.parse(item.images))
            item.aimages =[]
            item.aimages.push('https://bjsf.bjsky.top'+JSON.parse(item.images)[0])
          })
          // console.log(this.tableData)
          let timer = setTimeout(()=>{
            this.loading = false
            clearTimeout(timer)
          },400)
        }else{
          if(res.data.msg =="token失效,请重新进行登录"){
            this.$router.push("/login");
          }
          if(res.data.msg=="此账号没有权限"){
            this.$message.error(res.data.msg);
            this.loading = false
          }
          let timer = setTimeout(()=>{
            this.$message.error(res.data.msg);
          },5000)
        }

      }).catch(err=>{
        console.log(err.message)
      })
    },
    // 确定搜索btn
    search(){
      this.getShopList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.topInputList[1].text,this.type)
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.toAdd();
    this.getShopList(this.token,1,this.limit,'','',this.type)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped >
.slelctBox{
  margin: 0 10px;
}
.everyBox{
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header .span{
  font-size: initial;
}
#app{
  width: 100%;
}
/deep/.header{
  background: white!important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.top-input{
  width: 150px;
  margin-right: 20px;
}
/deep/.el-table th.el-table__cell>.cell{
  text-align: center;
}
/deep/.el-table .cell.el-tooltip{
  text-align: center;
}

/deep/.el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}
/deep/ .el-tabs--border-card>.el-tabs__content{
  padding: 0;
}
.caozuo{
  display: flex;
  align-items: center;
}
.body{
  margin: 20px 0;
}
</style>
